<template>
  <div class="assectToExamine">

    <el-form class="assectForm" ref="form" :model="assectForm" label-width="80px">
      <!-- <allocationForm></allocationForm> -->
      <components :actName='actName' :goodsList='goodsList' :instanceId='instanceId' :is='showComponent' :assectForm='assectForm'></components>

      <!-- <el-row>

        <el-form-item label="申购清单">
          <div>

            <el-table :data="assectForm.activitiTransferGoodsList" border style="width: 100%">
              <el-table-column prop="name" label="物品名称" width="">
              </el-table-column>
              <el-table-column prop="assetsId" label="物品分类" width="" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="brand" label="品牌">
              </el-table-column>
              <el-table-column prop="model" label="型号">
              </el-table-column>
              <el-table-column prop="address" label="单位">
              </el-table-column>
              <el-table-column prop="address" label="规格">
              </el-table-column>

            </el-table>
          </div>
        </el-form-item>

      </el-row> -->

      <div v-show="accName != '退货流程'" style="text-align:left; cursor:pointer" @click="showFile">

        <span style="font-size:15px;font-weight:700">
          报废单
        </span>
        <img :class="['fileImg',{isShow:isShow}]" style="vertical-align: middle" src="/static/image/newWork/d-arrow-right.png" alt="">

        <span>共有报废单</span>
        <img style="vertical-align: middle" src="static/image/newWork/document 1.png" alt="">
        <span>0</span> 单
      </div>
      <div v-show="accName != '退货流程'" :class="['fileList',{height0:isShow}]" ref="fileList">

      </div>

      <div v-show="accName != '退货流程'" style="text-align:left; cursor:pointer" @click="showImage">

        <span style="font-size:15px;font-weight:700">
          附件
        </span>
        <img :class="['fileImg',{isShow:isShowImage}]" style="vertical-align: middle" src="/static/image/newWork/d-arrow-right.png" alt="">

        <span>共有附件</span>
        <img style="vertical-align: middle" src="static/image/newWork/paperclip 1.png" alt="">
        <span>{{fileList.length}}</span> 个
      </div>

      <div v-show="accName != '退货流程'" :class="['fileList',{height0:isShowImage}]" ref="fileList">
        <div class="imageList" v-for="t in fileList" :key="t.id">
          <div class="imageList_left">
            <img style="vertical-align: text-top;" src="static/image/newWork/容器.png" alt="">
            <div class="imageInfo">
              <div class="imageInfo_up">{{t.name}}</div>
              <!-- <div class="imageInfo_down">5.62m</div> -->
            </div>
          </div>
          <div class="imageList_right">
            <img @click="viewImg(t)" v-show="t.name.split('.')[1] == 'png' || t.name.split('.')[1] == 'jpg'" style="vertical-align: text-top;" src="static/image/newWork/view 1.png" alt="">
            <img @click="downloadFiles(t)" style="vertical-align: text-top;" src="static/image/newWork/download 1.png" alt="">
          </div>

        </div>
      </div>
      <transition name="el-fade-in-linear">

      </transition>

      <el-dialog title="预览" :visible.sync="isView" width="50%">

        <!-- <el-image v-if="isView" class="preView" :src="'http://192.168.1.146:9200/api-file/files/ioReadFile/' + imgId + '?access_token=' + localStorage.getItem('accessToken')">
          <div slot="error" class="image-slot" style="font-size:20px">

            加载失败
          </div>
        </el-image> -->
        <el-image class="preView" :src="imgUrl">
          <div slot="error" class="image-slot" style="font-size:20px">

            加载失败
          </div>
        </el-image>

        <span slot="footer" class="dialog-footer">
          <el-button @click="isView = false">取 消</el-button>

        </span>
      </el-dialog>

      <div v-if="actName != '采购受理'">

        <el-form-item label="审批记录">
          <div>

            <el-table :data="tableData" border style="width: 80%">
              <el-table-column prop="activityName" label="任务名称" width="180">
              </el-table-column>
              <el-table-column prop="assigneeName" label="处理人">
              </el-table-column>
              <el-table-column prop="comment" label="审批意见">
              </el-table-column>
              <el-table-column prop="startTime" label="开始时间" width="180">
              </el-table-column>
              <el-table-column prop="endTime" label="结束时间" width="180">
              </el-table-column>
              <el-table-column prop="address" label="耗时">
              </el-table-column>

            </el-table>
          </div>
        </el-form-item>
        <el-row v-show="actName != '采购受理'">
          <el-col :span="18">
            <el-form-item label="审核意见">
              <el-input type="textarea" v-model="p_COM_comment"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-show="actName != '采购受理'">
          <el-col :span="18">
            <el-form-item label="审核意见">
              <el-select v-model="p_B_outcome" placeholder="" style="width:100%">
                <el-option label="同意" value="true"></el-option>
                <el-option label="不同意" value="false"></el-option>
              </el-select>
            </el-form-item>

          </el-col>
        </el-row>
      </div>

      <div style="width:70%;text-align:center">
        <el-button type="primary" @click="onSubmit">确认</el-button>
        <el-button @click="goback">取消</el-button>
      </div>

      <div style="height:20px"></div>
    </el-form>
  </div>
</template>

<script>
import allocationForm from "./assectToExamineComponents/allocationForm.vue";
import purchaseForm from "./assectToExamineComponents/purchaseForm.vue";
import borrowForm from "./assectToExamineComponents/borrowForm.vue";
import scrapForm from "./assectToExamineComponents/scrapForm.vue";
import applyPurchaseForm from "./assectToExamineComponents/applyPurchaseForm.vue";
import lowValueClaimForm from "./assectToExamineComponents/lowValueClaimForm.vue";
import replenishment from "./assectToExamineComponents/replenishment.vue";
import procurement from "./assectToExamineComponents/procurement";
import returnGood from "./assectToExamineComponents/returnGood.vue";
import replenishmentAcceptance from "./assectToExamineComponents/replenishmentAcceptance.vue";
import {
  process,
  downloadFile,
  ioReadFile,
  listHistory,
  getReturnGoodsDataTodoList,
} from "@/api/assetsWorkApp.js";
export default {
  mounted() {
    this.localStorage = window.localStorage;
    console.log(this.assectForm, 1711111);
    this.listHistoryFun();
    this.getReturnGoodsDataTodoListFun();
  },
  props: {
    actName: {},
    instanceId: {},
    accName: {},
    assectForm: {
      default: () => {
        return {};
      },
    },
  },
  components: {
    allocationForm,
    purchaseForm,
    borrowForm,
    scrapForm,
    applyPurchaseForm,
    lowValueClaimForm,
    procurement,
    replenishment,
    returnGood,

    replenishmentAcceptance,
  },
  computed: {
    fileList() {
      //  JSON.parse(assectForm.fileName)
      let arr = [];
      if (typeof this.assectForm.fileName == "string") {
        arr = JSON.parse(this.assectForm.fileName).map((t) => {
          for (let key in t) {
            return { name: key, id: t[key] };
          }
        });
        console.log(arr, 161);
      }
      return arr;
    },
    showComponent() {
      console.log(this.accName, 150);
      if (this.accName == "调拨流程") {
        return "allocationForm";
      }
      if (this.accName == "固定资产申购流程") {
        if (this.actName == "采购受理") {
          return "procurement";
        } else {
          return "purchaseForm";
        }
      }
      if (this.accName == "借用流程") {
        return "borrowForm";
      }
      if (this.accName == "报废流程") {
        return "scrapForm";
      }
      if (this.accName == "低值易耗申购流程") {
        if (this.actName == "采购受理") {
          return "procurement";
        } else {
          return "applyPurchaseForm";
        }
      }
      if (this.accName == "低值易耗申领流程") {
        return "lowValueClaimForm";
      }
      if (this.accName == "采购确认流程") {
        return "procurement";
      }
      if (this.accName == "补货申请流程") {
        if (this.actName == "采购受理") {
          return "replenishmentAcceptance";
        } else {
          return "replenishment";
        }
      }
      if (this.accName == "退货流程") {
        return "returnGood";
      }
    },
  },
  data() {
    return {
      goodsList: [],
      p_B_outcome: "true",
      p_COM_comment: "",
      localStorage: {},
      imgId: "",
      imgUrl: "",
      isView: false,
      isShowImage: false,
      isShow: false,
      tableData: [],
    };
  },
  methods: {
    async getReturnGoodsDataTodoListFun() {
      if (this.accName == "退货流程") {
        let data = {
          page: 1,
          limit: 10,
          access_token: localStorage.getItem("accessToken"),
          womId: this.assectForm.womId,
        };
        const res = await getReturnGoodsDataTodoList(data);

        let list = res.data.datas.data;
        this.goodsList = list;
      } else {
      }
    },
    async listHistoryFun() {
      let access_token = localStorage.getItem("accessToken");

      // let id = this.assectForm.taskId;
      let id = this.assectForm.instanceId;
      let params = {
        access_token,
      };
      const res = await listHistory(params, id);
      console.log(res, 279);
      let data = res.data.data;

      this.tableData = data;
    },
    async downloadFileFun(t) {
      let id = t.id,
        access_token = localStorage.getItem("accessToken");
      const res = await downloadFile(id, access_token);

      let url = window.URL.createObjectURL(res.data);
      console.log(window.URL.createObjectURL, 205);
      let a = document.createElement("a");
      a.download = t.name;
      a.href = url;
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove();
    },
    async ioReadFileFun(t) {
      let id = t.id,
        access_token = localStorage.getItem("accessToken");
      const res = await ioReadFile(id, access_token);

      let url = window.URL.createObjectURL(res.data);

      this.imgUrl = url;
      // this.imgUrl =
      //   "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg";
      this.isView = true;
    },
    viewImg(t) {
      this.imgId = t.id;
      // this.isView = true;
      this.ioReadFileFun(t);
    },
    downloadFiles(t) {
      this.downloadFileFun(t);
    },
    goback() {
      this.$emit("assectGoback");
    },
    async processFun() {
      let {
        id,
        taskId,
        instanceId,
        taskName,
        applyUser,
        transferOrderNumber,
        transferInDeptName,
        transferOutDeptName,
        applyHandle,
        transferReason,
        receiverName,
        shippingAddress,
        contactNumber,
        activitiScrapGoodsList,
        applyDeptName,
        documentNumber,
        scrapReason,
        applyReason,
        expectedDeliveryDate,
        gmPurchaseType,
        activitiPurchaseGoodsList,
        storageLocationName,
        userName,
        createDeptName,
        createName,
        sourceNo,
        wmName,
        womId,
        repDept,
        replenishmentNumber,
        claimantsLocationName,
        applyDeptId,
        confirmed,
        fileName,
        gmStorage,
        scrapId,
        activitiPurchaseGoodsVoList,
        status,
        storageLocationId,
        repairInvoiceGoods,
      } = this.assectForm;
      let params = {};
      if (this.accName == "调拨流程") {
        params = {
          id,
          taskId,
          instanceId,
          taskName,
          applyUser,
          transferOrderNumber,
          transferInDeptName,
          transferOutDeptName,
          applyHandle,
          transferReason,
          receiverName,
          shippingAddress,
          contactNumber,
          p_COM_comment: this.p_COM_comment,
          p_B_outcome: this.p_B_outcome,
        };
      } else if (this.accName == "报废流程") {
        params = {
          applyDeptName,
          applyUser,
          documentNumber,
          id: id + "",
          instanceId,
          scrapReason,
          taskId,
          taskName,
          p_COM_comment: this.p_COM_comment,
          p_B_outcome: this.p_B_outcome,
          activitiScrapGoodsList,
        };
      } else if (this.accName == "固定资产申购流程") {
        if (this.actName == "采购受理") {
          params = {
            activitiPurchaseGoodsList: activitiPurchaseGoodsVoList,
            applyDeptId,
            applyDeptName,
            applyReason,
            confirmed,
            documentNumber,
            expectedDeliveryDate,
            file: "",
            fileName,
            gmPurchaseType,
            gmStorage,
            id,
            scrapId,
            status,
            storageLocationId,
            storageLocationName,
            userName,
          };
        } else {
          params = {
            applyDeptName,
            applyReason,
            applyUser,
            documentNumber,
            expectedDeliveryDate,
            gmPurchaseType,
            goodsList: activitiPurchaseGoodsList,
            id: id + "",
            instanceId,
            p_COM_comment: this.p_COM_comment,
            p_B_outcome: this.p_B_outcome,
            storageLocationName,
            taskId,
            taskName,
            userName,
            purchaseTodo_orderListChooseType: "3",
          };
        }
      } else if (this.accName == "退货流程") {
        params = {
          createDeptName,
          createName,
          instanceId,
          p_B_outcome: this.p_B_outcome,
          p_COM_comment: this.p_COM_comment,
          sourceNo,
          taskId,
          taskName,
          wmName,
          womId,
        };
      } else if (this.accName == "补货申请流程") {
        if (this.actName == "采购受理") {
          params = {
            applyReason,
            id,
            repDept,
            repairInvoiceGoods,
            replenishmentNumber,
          };
        } else {
          params = {
            applyUser,
            id,
            instanceId,
            p_B_outcome: this.p_B_outcome,
            p_COM_comment: this.p_COM_comment,
            repDept,
            replenishmentNumber,
            taskId,
            taskName,
          };
        }
      } else if (this.accName == "低值易耗申购流程") {
        if (this.actName == "采购受理") {
          params = {
            activitiPurchaseGoodsList: activitiPurchaseGoodsVoList,
            applyDeptId,
            applyDeptName,
            applyReason,
            confirmed,
            documentNumber,
            expectedDeliveryDate,
            file: "",
            fileName,
            gmPurchaseType,
            gmStorage,
            id,
            scrapId,
            status,
            storageLocationId,
            storageLocationName,
            userName,
          };
        } else {
          params = {
            applyDeptName,
            applyReason,
            applyUser,
            documentNumber,
            expectedDeliveryDate,
            gmPurchaseType,
            id,
            instanceId,
            p_B_outcome: this.p_B_outcome,
            p_COM_comment: this.p_COM_comment,
            taskId,
            taskName,
            userName,
          };
        }
      } else if (this.accName == "低值易耗申领流程") {
        params = {
          applyDeptName,
          applyReason,
          claimantsLocationName,
          documentNumber,
          expectedDeliveryDate,
          id,
          instanceId,
          p_B_outcome: this.p_B_outcome,
          p_COM_comment: this.p_COM_comment,
          storageLocationName,
          taskId,
          userName,
        };
      }

      console.log(params, 306);
      try {
        const res = await process(this.accName, this.actName, taskId, params);

        console.log(res, 180);

        if (res.data.resp_code == 0) {
          this.$Message.success(res.data.resp_msg);
          setTimeout(() => {
            this.$emit("assectGoback");
          }, 1000);
        }
      } catch (error) {
        console.log(error, 183);
      }
    },
    onSubmit() {
      console.log(this.assectForm);
      this.processFun();
    },
    showImage() {
      this.isShowImage = !this.isShowImage;
    },

    showFile() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

<style lang="less" scoped>
// @import "xxx";
// @import url(xxx);
.assectToExamine {
  width: 80%;
  height: 100%;
  padding: 20px 30px;
  /deep/.el-radio__input.is-checked .el-radio__inner {
    background: #e67529;
  }
  /deep/.el-radio__input.is-checked + .el-radio__label {
    color: #e67529;
  }

  .assectForm {
    width: 100%;

    .fileImg {
      transition: all 0.5s;
    }

    .isShow {
      transform: rotate(-90deg);
    }

    .fileList {
      transition: all 0.5s;
      width: 80%;
      max-height: 100px;
      overflow: auto;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      padding-left: 80px;

      .imageList {
        height: 48px;
        border-radius: 1px;
        width: 48%;
        margin: 2% 2% 0 0;
        border: 1px solid #e6e6e6;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .imageList_left {
          display: flex;

          .imageInfo {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
          }
        }

        .imageList_right {
          display: flex;
          align-items: center;

          img {
            cursor: pointer;
            margin-top: 2px;
          }
        }
      }
    }

    .preView {
      // position: absolute;
      // top: 100px;
      // left: 100px;
      // bottom: 100px;
      // right: 100px;
      // z-index: 1000;
    }
    .height0 {
      max-height: 0;
      //   overflow: hidden;
    }
  }
}
</style>